<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
		Vue中的事件修饰符
		 1、prevent：阻止默认事件（常用）
		 2、stop：阻止事件冒泡（常用）
		 3、once：事件只触发一次（常用）
		 4、capture：使用事件的捕获模式
		 5、self：只有event.target是当前操作的元素时才触发事件
		 6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕
		 -->
		<div id="root">
			<h2>事件修饰符</h2>
			<!-- 阻止默认事件 -->
			<a @click.prevent="showMsg" href="https://www.baidu.com">点击提示信息</a>
			<!-- 阻止事件冒泡 -->
			<div class="demo1" @click="showMsg">
				<button  @click.stop="showMsg">点击提示信息</button>
				<button  @click.stop.prevent="showMsg">点击提示信息</button>
			</div>
			<!-- 事件只触发一次 -->
			<button @click.once="showMsg">点击提示信息</button>
			
			<!-- 启用事件捕获 -->
			<div class="box1" @click.capture="showInfo(1)">
				div1
				<div class="box2" @click="showInfo(2)">
					div2
				</div>
			</div>
			
			<!-- 只有event.target是当前操作元素时才触发事件 -->
			<div class="demo1" @click.self="showMsg">
				parent
				<button @click="showMsg">点击提示信息</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false
		new Vue({
			el:'#root',
			data:{
				
			},
			methods:{
				showMsg(event){
					alert(123)
					console.log(event.target)
				},
				showInfo(number){
					console.log(number)
				}
			}
		})
	</script>
</html>